<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""DTD/xhtml1-strict.dtd">
<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib uri="/WEB-INF/c.tld" prefix="c"%>
<%@taglib uri="/WEB-INF/fmt.tld" prefix="fmt"%>
<%@taglib uri="/WEB-INF/el.tld" prefix="el"%>
<%@taglib uri="/WEB-INF/fn.tld" prefix="fn"%>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<c:import url="/includes/css_inc.jsp"/>
		<c:import url="/includes/js_inc.jsp"/>
		<script>
			$(function(){
				$("#btnAdd").button({
		            icons: {
		                primary: "ui-icon-plusthick"
		            }
				}).click(function(){
					$("#job").val("add");
					$("#searchForm").submit();
				});
				$("#btnSearch").button({
		            icons: {
		                primary: "ui-icon-search"
		            }
		        }).click(function(){
		        	dateFormat(document.getElementById("startDate"));
		        	dateFormat(document.getElementById("endDate"));
		        	var result = "";
		        	result = dateDiff($("#startDate").val(), $("#endDate").val(),"/");
		        	if (!result && $("#startDate").val() != "" && $("#endDate").val() != "") {
		        		alert("วันเริ่มต้นต้องน้อยกว่าวันสิ้นสุดกรุณาระบุใหม่");
		        		$("#endDate").val("");
						return false;
		        	} else {
						$("#searchForm").submit();
					}
				});
		        $("[name=btnEdit]").button({
		            icons: {
		                primary: "ui-icon-pencil"
		            },
            		text: false
		        });
		        $("[name=btnDel]").button({
		            icons: {
		                primary: "ui-icon-closethick"
		            },
            		text: false
		        });
		        $("[name=btnView]").button({
		            icons: {
		                primary: "ui-icon-search"
		            },
            		text: false
		        });
		        $("[name=btnEdit2]").button({
		            icons: {
		                primary: "ui-icon-pencil"
		            },
            		text: false
		        });
		        thaiDatepicker("startDate","#","1");
		        thaiDatepicker("endDate","#","1");
			});
			function viewData(docNo,provinceId){
				window.location='${pageContext.request.contextPath}/acc6?app=ACC60310&job=edit&flag=Y&docNo='+docNo+'&provinceId='+provinceId;
			}
			function editData(docNo,provinceId,mode){
				window.location='${pageContext.request.contextPath}/acc6?app=ACC60310&job=edit&docNo='+docNo+'&provinceId='+provinceId+'&mode='+mode;
			}
			function delData(docNo,provinceId){
				if(confirm('คุณต้องการลบรายการรายจ่าย?')==true){
					window.location='${pageContext.request.contextPath}/acc6?app=ACC60310&job=del&docNo='+docNo+'&&provinceId='+provinceId;
				}
			}
		</script>
	</head>
	<body>
		<c:set var="auth" value="${el:getMapValue(menuAuth, 'ACC60310')}"/>
		<c:import url="/apps/msg.jsp"/>
		<form class="acc67-form" name="searchForm" id="searchForm" action="${pageContext.request.contextPath}/acc6" method="post">
		<input type="hidden" name="app" id="app" value="ACC60310"/>
		<input type="hidden" name="job" id="job" value="${job}"/>
		<input type="hidden" name="proviceId" id="proviceId" value="${userInfo.areaCode}"/>
		<table width="100%" class="ui-widget ui-widget-content" border="0">
			<tr>
				<th align="left" class="acc67-header ui-widget-header" colspan="2"><b>${screenCode.ACC60310}</b></th>
			</tr>
			<tr>
				<td align="right" colspan="2">
					<c:if test="${fn:contains(auth, 'I')}">
						<button type="button" name="btnAdd" id="btnAdd" class="acc67-button">จ่าย cheque หลายกองทุน</button>
					</c:if>
				</td>
			</tr>
			<tr>
				<td width="20%" class="bold">จังหวัด : </td>
				<td>
					<c:if test="${userInfo.areaLevel =='3'}">
						<c:forEach var="data" items="${userInfo.listUserProvice}">
							${data.provinceName}
							<input type="hidden" name="provinceId" id="provinceId" value="${data.provinceId}">
						</c:forEach>
					</c:if>
					<c:if test="${userInfo.areaLevel=='1' || userInfo.areaLevel=='2'}">
						<select name="provinceId" id="provinceId">
							<option value="">----- เลือก -----</option>
							<c:forEach var="data" items="${userInfo.listUserProvice}">
								<c:if test="${data.provinceId == provinceId}" var="provinceSeleted"/>
								<option value="${data.provinceId}" ${provinceSeleted?'selected':''}>${data.provinceName}</option>
							</c:forEach>
						</select>
					</c:if>
				</td>
			</tr>
			<%-- <tr>
				<td class="bold">ปีงบประมาณ : </td>
				<td>
					<select name="budgetYear" id="budgetYear">
						<option value="">----- เลือก -----</option>
							<c:if test="${!empty listBudgetYear}">
								<c:forEach var="data" items="${listBudgetYear}" varStatus="x">
									<c:if var="selected" test="${budgetYear == data.BUDGET_YEAR}"/>
									<option value="${data.BUDGET_YEAR}" ${selected ? 'selected' : ''}>${data.BUDGET_YEAR}</option>
								</c:forEach>
							</c:if>
					</select>
				</td>
			</tr> --%>
			<tr>
				<td class="bold">เลขที่เอกสาร : </td>
				<td>
					<input type="text" name="docNo" id="docNo" value="${docNo}"/>
				</td>
			</tr>
			<tr>
				<td class="bold">เลขที่เอกสารอ้างอิง : </td>
				<td>
					<input type="text" name="refNo" id="refNo" value="${refNo}"/>
				</td>
			</tr>
			<tr>
				<td class="bold">เลขที่ cheque: </td>
				<td>
					<input type="text" name="chequeNo" id="chequeNo" value="${chequeNo}"/>
				</td>
			</tr>
			<tr>
				<td class="bold">วันที่จ่าย : </td>
				<td>
					<input type="text" name="startDate" id="startDate" size="12" maxlength="10" onkeypress="return numberAndSlash(event);" onblur="dateFormat(this);" value="${startDate}"/>&nbsp;&nbsp; ถึง  &nbsp;&nbsp;
					<input type="text" name="endDate" id="endDate" size="12" maxlength="10" onkeypress="return numberAndSlash(event);" onblur="dateFormat(this);" value="${endDate}"/>
				</td>
			</tr>
			<tr>
				<td class="bold">สถานะการจ่าย : </td>
				<td>
					<select name="chequeStatus" id="chequeStatus">
						<option value="">----- เลือก -----</option>
						<c:forEach var="es" items="${expenseStatus}">
							<c:if var="statusSelected" test="${chequeStatusSel == es.key}"/>
							<c:if test="${es.key != 'S'}">
								<option value="${es.key}"} ${statusSelected?'selected':''}>${es.value}</option>
							</c:if>
					    </c:forEach>
					</select>
				</td>
			</tr>
			<tr>
				<td colspan="2" align="center">
					<button type="submit" name="btnSearch" id="btnSearch">ค้นหาข้อมูล</button>
				</td>
			</tr>
		</table>
		<br/>
		<c:if test="${!empty pageBean.pageData}">
			<fieldset>
				<legend>ผลการค้นหาข้อมูล</legend>
					<table width="100%" class="acc67-grid ui-widget ui-widget-content" border="0">
						<tr>
							<th align="center" class="ui-state-default" width="10%" onclick="pageControl('S', 'DOC_NO');"><span id="DOC_NO" class="ui-icon ui-icon-triangle-2-n-s" style="float: right;"></span>เลขที่เอกสาร</th>
							<!-- <th align="center" class="ui-state-default" onclick="pageControl('S', 'REF_NO');"><span id="REF_NO" class="ui-icon ui-icon-triangle-2-n-s" style="float: right;"></span>เลขที่เอกสารอ้างอิง</th> -->
							<th align="center" class="ui-state-default" onclick="pageControl('S', 'CHEQUE_NO');"><span id="CHEQUE_NO" class="ui-icon ui-icon-triangle-2-n-s" style="float: right;"></span>เลขที่ cheque</th>
							<th align="center" class="ui-state-default" >จำนวนเงิน</th>
							<th align="center" class="ui-state-default" onclick="pageControl('S', 'CHEQUE_DATE');"><span id="CHEQUE_DATE" class="ui-icon ui-icon-triangle-2-n-s" style="float: right;"></span>วันที่ cheque</th>
							<th align="center" class="ui-state-default" onclick="pageControl('S', 'CHEQUE_RECEIVING_DATE');"><span id="CHEQUE_RECEIVING_DATE" class="ui-icon ui-icon-triangle-2-n-s" style="float: right;"></span>วันที่ตัดยอดบัญชี</th>
							<th align="center" class="ui-state-default" onclick="pageControl('S', 'CHEQUE_STATUS');"><span id="CHEQUE_STATUS" class="ui-icon ui-icon-triangle-2-n-s" style="float: right;"></span>สถานะ</th>
							<th align="center" class="ui-state-default" width="4%">แก้ไข</th>
							<th align="center" class="ui-state-default" width="4%">ลบ</th>
							<th align="center" class="ui-state-default" width="7%">เรียกดู</th>
							<c:if test="${userInfo.roleId == '1'}">
								<th align="center" class="ui-state-default" width="9%">แก้ไขรายการ</th>
							</c:if>
						</tr>
					<c:forEach var="data" items="${pageBean.pageData}" varStatus="x">
						<tr class="grid-tr-${x.count % 2}">
							<td align="center">${data.docNo}</td>
							<%-- <td align="center">${data.refNo}</td> --%>
							<td align="center">${data.chequeNo}</td>
							<td align="right"><fmt:formatNumber pattern="#,##0.00" value="${data.sumChequeAmount}" /></td>
							<td align="center">${el:dateTh(data.chequeDate)}</td>
							<td align="center">${el:dateTh(data.chequeReceivingDate)}</td>
							<td align="center">${el:getMapValue(expenseStatus,data.chequeStatus)}</td>
							<c:if test="${data.chequeStatus == 'P'}">
								<td align="center">
									<c:if test="${fn:contains(auth, 'U')}">
										<button type="button" name="btnEdit" id="btnEdit" class="acc67-button"  onclick="editData('${data.docNo}','${data.provinceId}','1')"/>
									</c:if>	
								</td>
								<td align="center">
									<c:if test="${fn:contains(auth, 'D')}">
										<button type="button" name="btnDel" id="btnDel" class="acc67-button"  onclick="delData('${data.docNo}','${data.provinceId}')"/>
									</c:if>
								</td>
								<td align="center">
									<c:if test="${userInfo.areaLevel=='2'}">
										<button type="button" name="btnView" id="btnView" class="acc67-button"  onclick="viewData('${data.docNo}','${data.provinceId}')"/>
									</c:if>
								</td>
							</c:if>
							<c:if test="${data.chequeStatus != 'P'}">
								<td align="center">&nbsp;</td>
								<td align="center">&nbsp;</td>
								<td align="center"><button type="button" name="btnView" id="btnView" class="acc67-button"  onclick="viewData('${data.docNo}','${data.provinceId}')"/></td>
							</c:if>
							<c:if test="${userInfo.roleId == '1'}">
								<c:if test="${data.chequeStatus == 'Y'}">
									<td align="center">
										<button type="button" name="btnEdit2" id="btnEdit2" class="acc67-button"  onclick="editData('${data.docNo}','${data.provinceId}','2')"/>
									</td>
								</c:if>
								<c:if test="${data.chequeStatus != 'Y'}">
									<td align="center">&nbsp;</td>
								</c:if>
							</c:if>
					</c:forEach>
					</table>
					<input type="hidden" name="formPage" id="formPage" value="searchForm"/>
					<c:import url="/apps/page.jsp"/>
			</fieldset>
		</c:if>
		</form>
	</body>
</html>